<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <script src="js/jquery-1.11.0.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <style type="text/css">
        body{
            background: url(img/bodyimg1.jpg) no-repeat left top;
            background-size:100%;
            background-attachment:fixed;
        }
        .nc_scale {
            background: #e8e8e8 !important;
        }
        .nc_scale div.bc_bg {
            background: #7ac23c !important;
        }
        .nc_scale .scale_text2 {
            color: #fff !important;
        }
        .nc_scale span {
            border: 1px solid #ccc !important;
        }
    </style>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }
        .container-1 {
            vertical-align: middle;
            background-color: #fff;
            padding: 40px 80px 30px;
            position: relative;
            height: 600px;
            width: 500px;
            margin: auto;
            border: 1px black solid;
            margin-top: 80px;
            opacity:0.9;
        }

        .container-2, .container-3 {
            vertical-align: middle;
            text-align: center;
        }

        .ip-1, .ip-2 {
            height: 50px;
            outline: none;
            resize: none;
            font-size: 20px;
            width: 360px;

        }
        .ip-3{
            height: 50px;
            font-size: 20px;
            width: 170px;
            float: left;
        }

        .ip-4 {
            height: 50px;
            width: 360px;
            background-color: #b9def0;
            color: white;
            font-size: 20px;
            font-weight: bolder;
        }

        input {
            margin: 0;
            padding: 0;
            outline: none;
            resize: none;
            font-size: 14px;
        }

        .p-1 {
            font-size: 40px;
        }

        .p-left {
            float: left;
        }

        .p_right {
            float: right;
            color: #b9def0;
        }

        .container-3 {
            margin-top: 30px;
        }
        .alert {
            margin: 0 auto;
            padding: 6px 10px;
            border: 1px solid transparent;
            text-align: left;
            color: #a94442;
            background-color: #f2dede;
            border-color: #ebccd1;
            margin-bottom: 17px;
            font-size: 12px;
            width: 360px;
        }
    </style>
</head>
<body>

<script src="//g.alicdn.com/sd/smartCaptcha/0.0.4/index.js"></script>
<script src="//g.alicdn.com/sd/quizCaptcha/0.0.1/index.js"></script>
<div class="container-1">
    <div class="container-2">
        <img src="img/logo.png" width="250px" height="100px">
    </div>
    <div class="container-3">
        <div id="errorMsg" class="alert alert-danger" ></div>
        <form id="loginform">
            <div class="form-group">
                <input type="text"  placeholder="用户名" class="ip-1" name="username" id="username">
            </div>
            <div class="form-group">
                <input type="password"  placeholder="密码" class="ip-2" name="password" id="password">
            </div>
            <div class="form-group">
                <div id="sc" style="margin: 0px">
                </div>
            </div>
            <div class="form-group">
                <input type="text"  placeholder="验证码" class="ip-3" name="checkCode" id="=checkCode">
            </div>
            <div class="form-group">
                <img src="/CheckCodeServlet" id="checkCode">
                <a id="change" href="#">换一张?</a>
            </div>
            <button type="button" class="btn btn-default ip-4" id="submit">登录</button>
        </form>
    </div>
    <div class="container-3">
        <a class="p-left" href="#">忘记密码了？</a>
        <a class="p_right" href="register.html">没有账号，快去注册</a>
    </div>
</div>
<script>
    window.NVC_Opt = {
        appkey:'FFFF0N00000000008D54',
        scene:'ic_login',
        renderTo:'#captcha',
        trans: {"key1": "code0", "nvcCode":200},
        elements: [
            '//img.alicdn.com/tfs/TB17cwllsLJ8KJjy0FnXXcFDpXa-50-74.png',
            '//img.alicdn.com/tfs/TB17cwllsLJ8KJjy0FnXXcFDpXa-50-74.png'
        ],
        bg_back_prepared: '//img.alicdn.com/tps/TB1skE5SFXXXXb3XXXXXXXXXXXX-100-80.png',
        bg_front: '',
        obj_ok: '//img.alicdn.com/tfs/TB1rmyTltfJ8KJjy0FeXXXKEXXa-50-74.png',
        bg_back_pass: '//img.alicdn.com/tfs/TB1KDxCSVXXXXasXFXXXXXXXXXX-100-80.png',
        obj_error: '//img.alicdn.com/tfs/TB1q9yTltfJ8KJjy0FeXXXKEXXa-50-74.png',
        bg_back_fail: '//img.alicdn.com/tfs/TB1w2oOSFXXXXb4XpXXXXXXXXXX-100-80.png',
        upLang:{"cn":{
                _ggk_guide: "请摁住鼠标左键，刮出两面盾牌",
                _ggk_success: "恭喜您成功刮出盾牌<br/>继续下一步操作吧",
                _ggk_loading: "加载中",
                _ggk_fail: ['呀，盾牌不见了<br/>请', "javascript:noCaptcha.reset()", '再来一次', '或', "http://survey.taobao.com/survey/QgzQDdDd?token=%TOKEN", '反馈问题'],
                _ggk_action_timeout: ['我等得太久啦<br/>请', "javascript:noCaptcha.reset()", '再来一次', '或', "http://survey.taobao.com/survey/QgzQDdDd?token=%TOKEN", '反馈问题'],
                _ggk_net_err: ['网络实在不给力<br/>请', "javascript:noCaptcha.reset()", '再来一次', '或', "http://survey.taobao.com/survey/QgzQDdDd?token=%TOKEN", '反馈问题'],
                _ggk_too_fast: ['您刮得太快啦<br/>请', "javascript:noCaptcha.reset()", '再来一次', '或', "http://survey.taobao.com/survey/QgzQDdDd?token=%TOKEN", '反馈问题']
            }
        }
    }
</script>

<script src="//g.alicdn.com/sd/nvc/1.1.112/guide.js"></script>
<script>
    window.onload = function(){
        var img = document.getElementById("checkCode");
        var change=document.getElementById("change");
        var date = new Date().getTime();
        img.src = "/CheckCodeServlet?" + date;
        img.onclick = function () {
            var date = new Date().getTime();
            img.src = "/CheckCodeServlet?" + date;
        }
        change.onclick = function () {
            var date = new Date().getTime();
            img.src = "/CheckCodeServlet?" + date;
        }
        var ic = new smartCaptcha({
            renderTo: '#sc',
            width: 360,
            height: 50,
            default_txt: '点击按钮开始智能验证',
            success_txt: '验证成功',
            fail_txt: '验证失败，请在此点击按钮刷新',
            scaning_txt: '智能检测中',
            success: function(data) {
                console.log(NVC_Opt.token);
                console.log(data.sessionId);
                console.log(data.sig);
            },
            fail: function(data) {
                console.log('ic error');
            }
        });
        ic.init();
    }
    $(function () {
    $("#submit").click(function () {
        var username=$("#username").val();
        var password=$("#password").val();
        var checkCode=$("#checkCode").val();
        $.post("user/login",$("#loginform").serialize(),function (data) {
               var errmsg=$("#errorMsg");
               if (data.Tcheck==0){
                   errmsg.html(data.msg);
               }
               if(data.Tcheck==1){
                   errmsg.html(data.msg);
               }
               if (data.Tcheck==2) {
                   location.href="index.html";
               }
        },"json");
    });
    })

</script>
</body>
</html>
